<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
		<title>供应商系统</title>
		<link rel="stylesheet" type="text/css" href="/Public/css/bootstrap.css"/>
		<link rel="stylesheet" href="/Public/css/style.css" />
		<link rel="stylesheet" type="text/css" href="/Public/css/font-awesome.min.css"/>
		<link rel="stylesheet" type="text/css" href="/Public/css/order.css"/>
	</head>
	<body>
		<header class="header">
				<a  href="/" class="back"><i class="fa fa-angle-left"></i></a>
				<h1>待发货</h1>				
			</header>
		<div id="app">
			<nav class="nav">
				<ul class="nav-ul">
						<li v-for="list in lists"><a :href="list.href"><i class="fa" :class="list.icon"></i>{{list.name}}<span class="badge">{{list.num}}</span></a></li>
				</ul>
			</nav>
			<section>
				<h2 class="hidden">订单信息</h2>
				<div class="top">
					<div class="topleft" v-show="purchases.length<2?false:true">
						<label>全选<input type="checkbox" class="allcheck"  @change="allcheck"/></label>
					</div>
					<div class="topright">
						共计{{allnumber()}}单
					</div>
				</div>
				<div class="content">
					<ul class="purchasebox" v-if="purchases[0].items.length">
						<li v-for="(purchase,index) in purchases">
							<div class="group">								
								<div class="col-xs-4"><label>选择<input type="checkbox" class="check"/></label></div>
								<div class="col-xs-8">采购批次ID：{{purchase.id}}</div>
							</div>
							<div class="group">
								<div class="col-xs-6">采购人：{{purchase.purchaser}}</div>
								<div class="col-xs-6">供货商：{{purchase.supplier}}</div>
							</div>	
							<div class="group">
								<div class="col-xs-12">下单时间：{{purchase.time}}</div>
							</div>
                            <div class="group">
								<div class="col-xs-12">接受时间：{{purchase.accept_time}}</div>
							</div>
							<table class="table table-bordered">
								<thead>
									<tr>
										<th class="text-center">序号</th>
										<th class="text-center">商品标题</th>
										<th class="text-center">条码</th>
										<th class="text-center">采购数量</th>
										<th class="text-center">采购单价</th>
										<th class="text-center">小计</th>
									</tr>
								</thead>
								<tbody>
									<tr class="text-center" v-for="(item,index) in purchase.items" v-if="index>=2?purchase.more:'ture'" >
										<td>{{index+1}}</td>
										<td style="width: 120px;">{{item.name}}</td>
										<td >{{item.barcode}}</td>
										<td>{{item.category}}</td>
										<td>{{item.unitprice}}</td>
										<td>{{(item.num*item.unitprice).toFixed(1)}}</td>										
									</tr>
                                    <tr class="text-center" @click="purchase.more='ture'" v-if="!purchase.more" v-show="purchase.items.length>2">
										<td colspan="6" class="more">展开全部<i class="fa fa-caret-down" style="margin-left: 5px;"></i></td>
									</tr>
									<tr class="text-center">
										<td colspan="6">共{{purchase.items.length}}条，合计：{{allmoney(index)}}元，结账方式：{{purchase.mode}}</td>
									</tr>
								    <tr>
								    	<td colspan="6">
                                            <p class="remarks"> 交货时间：收到订单之日起48小时内；</p>
                                            <p class="remarks">订单价格：以本订货单为准。送货到我司仓库及门店视为对本订货单内容的认可；</p>
                                            <p class="remarks">订货单经三方签字，作为与我司财务对账依据；</p>
                                            <p class="remarks">如遇列表中商品降价的情形，则需告知我司，该类商品价格按降价后的价格执行。</p>
								    	</td>
								    </tr>
								</tbody>
							</table>							
						</li>
					</ul>
					<ul class="refundbox"  v-if="refunds[0].items.length">
						<li v-for="(refund,index) in refunds">
							<div class="group">							
								<div class="col-xs-4"><label>选择<input type="checkbox" class="check"/></label></div>
								<div class="col-xs-8">批次ID：{{refund.id}}</div>					
							</div>
							<div class="group">
								<div class="col-xs-6">采购人：{{refund.purchaser}}</div>
								<div class="col-xs-6">供货商：{{refund.supplier}}</div>
							</div>	
							<div class="group">
								<div class="col-xs-12">下单时间：{{refund.time}}</div>
                                <div class="col-xs-12">下单时间：{{refund.accept_time}}</div>
							</div>
							<table class="table table-bordered">
								<thead>
									<tr>
										<th class="text-center">序号</th>
										<th class="text-center">商品标题</th>
										<th class="text-center">条码</th>
										<th class="text-center">退货数量</th>
										<th class="text-center">采购单价</th>
										<th class="text-center">小计</th>
										<th class="text-center">退货原因</th>
									</tr>
								</thead>
								<tbody>
									<tr class="text-center" v-for="(item,index) in refund.items" v-if="index>=2?refund.more:'ture'">
										<td>{{index+1}}</td>
										<td style="width: 120px;">{{item.name}}</td>
										<td style="width: 100px;word-break:break-all;">{{item.barcode}}</td>
										<td>{{item.num}}</td>
										<td>{{item.unitprice}}</td>
										<td>{{(item.num*item.unitprice).toFixed(1)}}</td>	
										<td>{{item.reason}}</td>
									</tr>
									<tr class="text-center" @click="refund.more='ture'" v-if="!refund.more">
										<td colspan="7" class="more">展开全部<i class="fa fa-caret-down" style="margin-left: 5px;"></i></td>
									</tr>
									<tr class="text-center">
										<td colspan="7">共{{refund.items.length}}条，合计：{{allmoney(index)}}元，结账方式：{{refund.mode}}</td>
									</tr>
								</tbody>
							</table>
						</li>
					</ul>
				</div>
			</section>
			<div role="dialog" class="modal fade" id="layer">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal">
								<span>&times;</span>
							</button>
							<p class="modal-title">填写信息</p>
						</div>
						<div class="modal-body ">
							<form>
								<div class="form-group">
									<label for="name">司机</label>
									<input type="text" class="form-control" id="name">
								</div>
								<div class="form-group">
									<label for="tel">手机号</label>
									<input type="text" class="form-control" maxlength="11" id="tel">
								</div>
								<div class="form-group">
									<label for="position">车牌号</label>
									<input type="text" class="form-control" id="license" >
								</div>
							</form>	
						</div>
						<div class="modal-footer text-right">
							<button data-dismiss="modal" class="btn btn-primary">取消</button>
							<button data-dismiss="modal" class="btn btn-danger" @click="confirm">确认</button>
						</div>
					</div>
				</div>
			</div>
			<footer class="footer">				
				<button class="btn btn-danger orders pull-right" @click="sub">发起配送</button>
			</footer>
		</div>
		<script src="/Public/js/jquery-2.1.0.js"></script>
		<script src="/Public/js/bootstrap.js"></script>
		<script src="/Public/js/vue.js"></script>
		<script src="/Public/js/vue-resource.js"></script>
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
                    lists:[{href:"/index/neworder",name:"新订单",num:"",icon:"fa-file-text-o"},{href:"/index/delivery",name:"待发货",num:"",icon:"fa-inbox"},{href:"/index/receipt",name:"待收货",num:"",icon:"fa-truck"},{href:"/index/arrived",name:"已完成",num:"",icon:"fa-check-square"},{href:"/index/cancel",name:"已取消",num:"",icon:"fa-frown-o"}],
					purchases:[{items:[]}],
					refunds:[{items:[]}],
					subid:[]
				},
				methods:{
                    allnumber:function(){
                        var purchases = this.purchases.length;
                        var refunds = this.refunds.length;
                        if(!this.purchases[0].items.length){
                            purchases = 0;
                        }
                        if(!this.refunds[0].items.length){
                            refunds = 0;
                        }
                        return purchases+refunds;
                    },
					allmoney:function(n){
						var money = 0;
						for(var i in this.purchases[n].items){
							money += this.purchases[n].items[i].num*this.purchases[n].items[i].unitprice;
						}
						return money.toFixed(1);
					},
					sub:function(){
						this.subid = [];
                        $.each($('.purchasebox .check'), function(index) {
                            if($(this).is(":checked")){
                                vm.subid.push(vm.purchases[index]);
                            }
                        });
                        $.each($('.refundbox .check'), function(index) {
                            if($(this).is(":checked")){
                                vm.subid.push(vm.purchases[index]);
                            }
                        });
                        if(this.subid.length){
                            $("#layer").modal();
                        }else{
                            alert("没有选择订单");
                        }
					},
					allcheck:function(){						
						if($('.allcheck').is(":checked")){
							$('.check').prop('checked',true);
						}else{
							$('.check').prop('checked',false);
						};
					},
					confirm:function(){
						if($("#name").val()&&$("#tel").val()&&$("#license").val()){
							this.$http.post('/order/send_order',{
								name:$("#name").val(),
								tel:$("#tel").val(),
								license:$("#license").val(),
								id:this.subid
							},{emulateJSON: true}).then(function(res){		//初始化赋值
                                if(res.data.data == '200'){
                                    alert('成功');
                                    window.location.href="/index/receipt";
                                }

							},function(){
								
							});	
						}else{
							alert("必须填写全部信息");
						};
					}
				},
				created:function(){
						this.$http.get('/order/delivery_info',{emulateJSON: true}).then(function(res){		//初始化赋值
                                if(res.data.data.length){
                                    this.purchases = res.data.data;
                                }else {
                                    this.purchases = [{items: []}];
                                }
                                for(var i in res.data.date) {
                                    if (res.data.date[i] == 0) {
                                        this.lists[i].num = "";
                                    } else {
                                        this.lists[i].num = res.data.date[i];
                                    }
                                }
//                            console.log(this.purchases.items.length);
						},function(){

						});
				}
			});
		</script>
	</body>
</html>
